<template>
  <el-row class="shortcuts-container">
    <el-row>
      <h1 class="shortcuts-title">{{ $t('pageOverview.shortcuts') }}</h1>
    </el-row>
    <el-row class="shortcuts-body">
      <el-col v-for="(icon, index) in icons" :key="index" :span="4">
        <div class="icon-container">
          <router-link :to="icon.route" class="icon-link">
            <img :src="icon.src" :alt="icon.name" class="icon" />
            <div class="icon-name">{{ icon.name }}</div>
          </router-link>
        </div>
      </el-col>
    </el-row>
  </el-row>
</template>

<script>
import { mapState } from 'vuex';
import { Row, Col } from 'element-ui';

export default {
  name: 'Shortcuts',
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
  },
  data() {
    return {
      icons: [
        {
          src: require('@/assets/shortcuts/network.svg'),
          name: this.$t('appPageTitle.network'),
          route: '/settings/network',
        },
        {
          src: require('@/assets/shortcuts/firmware.svg'),
          name: this.$t('appPageTitle.firmware'),
          route: '/settings/firmware',
        },
        {
          src: require('@/assets/shortcuts/setting.svg'),
          name: this.$t('appPageTitle.configureManagement'),
          route: '/settings/configure-management',
        },
        {
          src: require('@/assets/shortcuts/time.svg'),
          name: this.$t('appPageTitle.dateTime'),
          route: '/settings/date-time',
        },
        {
          src: require('@/assets/shortcuts/user.svg'),
          name: this.$t('appPageTitle.userManagement'),
          route: '/user-security/user-management',
        },
        {
          src: require('@/assets/shortcuts/control.svg'),
          name: this.$t('appPageTitle.serialOverLan'),
          route: '/services/serial-over-lan',
        },
      ],
    };
  },
  computed: {
    ...mapState({
      server: (state) => state.system.systems[0],
      serverModel() {
        return this.server?.model;
      },
      serverSerialNumber() {
        return this.server?.serialNumber;
      },
    }),
  },
  created() {
    this.$store.dispatch('system/getSystem').finally(() => {
      this.$root.$emit('overview-server-complete');
    });
  },
};
</script>
<style scoped>
.shortcuts-container {
  border-radius: 5px;
  background-color: #fff;
  .el-row {
    padding: 20px 30px 10px;
  }
}
.shortcuts-title {
  font-size: 22px;
}
.icon-container {
  text-align: center;
}
.icon {
  width: 70px;
  height: 70px;
}
.icon-name {
  margin: 15px 0px;
  font-size: 16px;
  color: black;
  text-decoration: none;
}
.icon-link {
  display: block;
  cursor: pointer;
  text-decoration: none;
}
</style>
